const path = require('path')
const webpack = require('webpack')
// 插件的作用:自动生成一个根目录文件,并且将它自动绑定到 boudle.js 文件上
const htmlWebpackPlugin = require('html-webpack-plugin')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const { resolve } = require('path')

module.exports = {
    // 指定一个路口和出口
    devtool: 'source-map',  // 代码调试
    entry: path.join(__dirname, './src/main.js'),
    output: {
        path: path.join(__dirname, './dist'),
        filename: 'boudle.js'
    },
    // --open --port 3000 --contentBase src --hot
    devServer: {
        open: true,
        port: 3000,
        contentBase: 'src',
        hot: true
    },
    plugins: [
        // 配置插件的节点,new一个热更新的模块对象
        new webpack.HotModuleReplacementPlugin(),
        new htmlWebpackPlugin({
            // 根据index.html 文件创建模板的路径
            template: path.join(__dirname, './src/index.html'),
            // 在内存中生产index文件
            filename: 'index.html'
        }),
        new VueLoaderPlugin()
    ],
    //这个节点用于配置所有第三方模块 加载器
    module: {
        rules: [
            // 建立第三方模块的匹配规则,配置.css文件的第三方loader 规则,从右往左调用
            { test: /\.css$/, use: ['style-loader', 'css-loader'] },
            // 配置处理less文件的第三方规则
            { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
            { test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] },
            // 处理图片的路径
            { test: /\.(jpg|jpeg|png|gif|bmp)$/, use:{ loader:'url-loader',options:{limit:25000,esModule:false}} },
            // 处理字体的loader
            { test: /\.(ttf|eot|svg|woff|woff2)$/, use: 'url-loader' },
            // bable转换ES6高级语法
            { test: /\.m?js$/, use: 'babel-loader', exclude: /(node_modules|bower_components)/ },
            // 处理.vue文件的loader
            { test: /\.vue$/, use: 'vue-loader' }
        ]
    },
    // 更改vue默认指定的包文件,更改路径
    resolve: {
        alias: {
            'vue$': 'vue/dist/vue.js'
        }
    }
}
// webpack指定路口和出口，一定要再根目录中找到“webpack.config.js”配置文件。解析执行配置文件，导出配置对象。进行打包构建。
// hot为热更新,contentBase src为文本根路径打开main.js,port 3000为配置到3000这个路口,open为自动打开